<template>
    <div class="orderPay flexv">
        <!-- 头部 -->
        <pubHead title="订单支付" ></pubHead>

        <div class="init mt2 jus-b ali-c">
            <span>订单编号</span>
            <span class="price">{{info.order_no}}</span>
        </div>
        <div class="init jus-b ali-c" style="border-bottom: none;">
            <span>订单金额</span>
            <span class="price">￥{{parseFloat(parseFloat(info.pay_money).toFixed(2))}}</span>
        </div>

        <div class="note">支付方式</div>

        <div class="type ali-c wx jus-b" @click="selectType(20)">
            <span>微信支付</span>
            <img src="@/assets/checked.png" class="check" v-if="type == 20" alt="">
            <img src="@/assets/check.png" class="check" alt="" v-else>
        </div>

        <!-- 支付按钮 -->
        <div class="payBtn white tc" @click="pay">确认支付</div>

    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import { u_Reg } from '@/config/utils.js';
import { Toast, Dialog } from 'vant';
import { orderpay } from '@/request/api';

Vue.use(Toast )
export default {
    data(){
        return{
            once: true, // 防止重复提交
            type: 20, // 支付方式 10支付宝支付 20 微信支付
            info: '', // 订单信息
            toWxUrl: '',
            show: false,
        }
    },
    components: {
        pubHead,
    },
    created(){
        this.info =  this.$route.query.info ? JSON.parse(this.$route.query.info) : '';
    },
    methods: {
        // 获取数据
        getData(){
        },
        // 选择支付方式
        selectType(type){
            this.type = type
        },
        // 确认支付
        pay(){
            if(this.once){
                let that  = this;
                this.once = false;
                this.$loading();
                orderpay({
                    order_no: this.info.order_no,
                    token: localStorage.getItem('token')
                }).then(res =>{
                    Toast.clear();
                    this.once = true;
                    if(res.code == 1){
                        that.awakenWXPay(res.data);
                    }else{
                        that.$router.replace('/payResult?type=2')
                    }
                })
            }else{
                this.$tip('请勿重复提交!');
            }
        },
        // 微信支付
        // 调起微信支付弹窗
        awakenWXPay (config) {
            let that = this;
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": config.appId,     //公众号名称，由商户传入
                    "timeStamp": config.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr": config.nonceStr, //随机串
                    "package": config.package,
                    "signType": config.signType,         //微信签名方式：
                    "paySign": config.paySign //微信签名
                }, 
                res => {
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
						let info ={
							status:1
						}
                        this.$router.replace('/')
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel"){
                        this.$router.replace('/payResult?type=2')
                    }
                }
            );
        },
    },
}
</script>
<style lang="less" scoped>
.orderPay{
    min-height: 100vh;
    background-color: #f5f5f5;
    .init{
        height: 1rem;
        padding: 0 0.3rem;
        font-size: 0.3rem;
        line-height: 120%;
        color: #333;
        border-bottom: 1px solid #e6e6e6;
        background-color: #fff;
        .price{
            color: #ff4400;
        }
    }
    .note{
        height: 0.72rem;
        padding: 0 0.3rem;
        font-size: 0.26rem;
        line-height: 0.72rem;
        color: #999;
    }
    .type{
        height: 0.88rem;
        padding: 0 0.28rem 0 0.8rem;
        font-size: 0.28rem;
        line-height: 120%;
        color: #333;
        border-bottom: 0.01rem solid #ededed;
        img{
            width: 0.36rem;
            height: 0.36rem;
            margin: auto 0;
        }
    }
    .type:last-child{
        border-radius: 0 0 0.1rem 0.1rem;
    }
    .wx{
        background: url('~@/assets/weipay.png') no-repeat 0.28rem center #fff;
        background-size: 0.4rem;
    }
    // 支付按钮
    .payBtn{
        width: 6.9rem;
        height: 0.88rem;
        margin: 3.2rem auto 0;
        border-radius: 0.44rem;
        font-size: 0.32rem;
        line-height: 0.88rem;
        background-color: #53AB2A;
    }
}
</style>